<template>
    <div id="app" style="display: flex;">
      <!-- 左侧列表 -->
      <div style="width: 100px; border-right: 1px solid #ccc; padding: 10px;">
        <ul>
          <li v-for="num in numbers" :key="num">
            <button @click="openTab(num)">Item {{ num }}</button>
          </li>
        </ul>
      </div>
  
      <!-- 中间内容 -->
      <div style="flex: 1; padding: 10px;">
        <div v-for="(item, index) in tabs" :key="index">
          <ItemInput 
            v-show="currentId.value === item" 
            :id="item" 
          />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { reactive } from "vue";
  import ItemInput from "./ItemInput.vue";
  
  export default {
    name: "App",
    components: {
      ItemInput,
    },
    setup() {
      const numbers = [1, 2, 3, 4, 5];
      const currentId = reactive({ value: null });
      const tabs = reactive([]);
  
      const openTab = (id) => {
        if (!tabs.includes(id)) {
          tabs.push(id);
        }
        console.log("tabs:", tabs)
        // 切换前检查是否需要移除旧的页面
        console.log("currentId.value:", currentId.value)
        if (currentId.value !== null) {
          const shouldRemove = tabs.indexOf(currentId.value) !== -1 && currentId.value != id;
          if (shouldRemove) {
            tabs.splice(tabs.indexOf(currentId.value), 1);
          }
        }
        console.log("后tabs:", tabs)
        currentId.value = id;
        console.log("后currentId.value:", currentId.value)
      };
  
      const checkAndRemoveTab = (id, shouldRemove) => {
        console.log("lksdjfklasdjklfslk")
        if (shouldRemove) {
          const index = tabs.indexOf(id);
          if (index !== -1) {
            tabs.splice(index, 1);
          }
          if (currentId.value === id) {
            currentId.value = tabs.length > 0 ? tabs[0] : null;
          }
        }
      };
  
      return {
        numbers,
        currentId,
        tabs,
        openTab,
        checkAndRemoveTab,
      };
    },
  };
  </script>
  